<template>
  <div class="apply">
    <Navigation :logoName="logoName" :routeInfo="routeInfo"></Navigation>
    <div>
      <div class="filter">
        <div class="fonttitle">筛选</div>
        <div class="filterCon">
          申请人&nbsp;&nbsp;&nbsp;<Input placeholder="申请人名称" style="width: 200px;margin-right:20px" v-model="applicantName"/>
          被申请人&nbsp;&nbsp;&nbsp;<Input placeholder="被申请人名称" style="width: 200px;" v-model="resName"/>
          <span class="applyTime">受理时间&nbsp;&nbsp;&nbsp;
            <DatePicker type="datetimerange" v-model="dateduring" placeholder="请选择日期" style="width:350px" @on-change='datepicker'></DatePicker>
          </span>
          提交状态&nbsp;&nbsp;&nbsp;<Select style="width:200px" v-model="submitStatus">
              <Option value="4" key="4">全部</Option>
              <Option value="1" key="1">已提交</Option>
              <Option value="0" key="0">未提交</Option>
              <Option value="2" key="2">通知缴费</Option>
              <Option value="3" key="3">已缴费</Option>
          </Select>
          <span class="btn" @click="filterCase()">筛选</span>
        </div>
      </div>
      <div class="table">
        <div class="titlename">
          <div class="fonttitle">仲裁申请记录
            <span :class="{notifypay:submitStatus=='4',noSelect:true}" @click="notifyPays('4')">全部</span>
            <span :class="{notifypay:submitStatus=='0',noSelect:true}" @click="notifyPays('0')">未提交</span>
            <span :class="{notifypay:submitStatus=='2',noSelect:true}" @click="notifyPays('2')">通知缴费</span></div>
          <div class="btnRight"><span class="btn mulplebtn-apply" @click="submitApply">批量提交申请</span></div>
        </div>
        <div class="tablecontent">
          <Table ref="selection" :loading="loading" height="470" :columns="columns7" :data="data6" @on-selection-change="selectChange"></Table>
        </div>
        <div class="page-show"><Page :total="totalSize" :current="current" @on-change="pagechange" :page-size="8"/></div>
      </div>
    </div>
     
     <Confirm :isshow="isshow" :msgs="msgs" @closePage='closePage' @completeclosePage="completeclosePage" :isupload='isupload'></Confirm>
    
  </div>
  
</template>

<script>
import Navigation from '../common/navigation'
import Confirm from '../common/confirm'
export default {
  name: 'ApplyIndex',
  data(){
     return {
       logoName:'仲裁申请',
       routeInfo:'首页/仲裁申请',
       selectInfos:[],
       applicantName:'',
       resName:'',
       uploadurl:'/api2'+this.urls.uploadApplicantFile,
       loading:true,
       submitStatus:'',
       startTime:'',
       endTime:'',
       dateduring:'',
       current:1,
       isshow:false,
       isupload:true,
       msgs:'确认缴费',
       selectsInfo:[],
       caseNo:'',
       totalSize:0,
       columns7: [
                    {
                        type: 'selection',
                        width: 40,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        width: 70,
                        key: 'id'
                    },
                    {
                        title: '申请人',
                        key: 'multipleAppName',
                        width: 160,
                        render: (h, params) => {
                          let param=params.row.multipleAppName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '被申请人',
                        key: 'multipleResName',
                        width: 160,
                        render: (h, params) => {
                          let param=params.row.multipleResName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '第三人',
                        width: 160,
                        key: 'multipleDsfName',
                        render: (h, params) => {
                          let param=params.row.multipleDsfName;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=10?param.substr(0,10)+'...':param)])
                        }
                    },
                    {
                        title: '受理时间',
                        width: 170,
                        key: 'acceptTime'
                    },
                    {
                        title: '案由',
                        key: 'caseReason',
                        width: 240,
                        render: (h, params) => {
                          let param=params.row.caseReason;
                          return h('div', [
                                h('span', {
                                },param&&param.length>=13?param.substr(0,13)+'...':param)])
                        }
                    },
                    {
                        title: '申请标的',
                        key: 'subjectAmount'
                    },
                    {
                        title: '本金',
                        key: 'principal'
                    },
                    {
                        title: '利息',
                        key: 'interest'
                    },
                    {
                        title: '是否超标',
                        key: 'isExceed',
                        render: (h, params) => {
                          return h('div', [
                                h('span', {
                                }, params.row.isExceed==1?'是':'否')])
                        }
                    },
                    {
                        title: '机构来源',
                        key: 'institutionalSources'
                    },
                    {
                        title: '提交状态',
                        key: 'submit_platform_status',
                        render: (h, params) => {
                          return h('div', [
                                h('span', {
                                }, params.row.submitPlatformStatus==1?'已提交':(params.row.submitPlatformStatus==2?'通知缴费':(params.row.submitPlatformStatus==3?'已缴费':'未提交')))])
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return params.row.submitPlatformStatus==1?h('div', [
                                h('span', {
                                    style: {
                                        marginRight: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.detail(params)
                                        }
                                    }
                                }, '查看'),
                                h('span', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.cancel(params)
                                        }
                                    }
                                }, '撤销')
                            ]):(params.row.submitPlatformStatus==2?h('div', [
                                h('span', {
                                    style: {
                                        marginRight: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.detail(params)
                                        }
                                    }
                                }, '查看'),
                                // h('span', {
                                //     style: {
                                //         marginRight: '5px',
                                //         color:'#1a7bfe',
                                //         cursor:'pointer'
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.submit(params)
                                //         }
                                //     }
                                // }, '提交'),
                                h('span', {
                                    style: {
                                        marginRight: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.confirmPay(params)
                                        }
                                    }
                                }, '确认缴费')
                            ]):(params.row.submitPlatformStatus==0?h('div', [
                                h('span', {
                                    style: {
                                        marginRight: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.detail(params)
                                        }
                                    }
                                }, '查看'),
                                h('span', {
                                    style: {
                                        marginRight: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.submit(params)
                                        }
                                    }
                                }, '提交')
                            ]):h('div', [
                                h('span', {
                                    style: {
                                        marginRight: '5px',
                                        color:'#1a7bfe',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.detail(params)
                                        }
                                    }
                                }, '查看')
                            ])));
                        }
                    }
                ],
                data6: []
            }
  },
  props: {
    msg: String
  },
  
  computed: {
    isFollow () {
      return this.$store.state.needAmont;
    }
  },
  watch: {
    isFollow () {
      //do something
      this.applicantName='';
      this.resName='';
      this.startTime='';
      this.endTime='';
      this.dateduring='';
      this.submitStatus='0';
      this.filterCase(1)
    }
  },
  // watch:{
  //   'this.$store.'
  // },
  methods:{
    back(){
        this.isshow=false;
    },
    closePage(param){
      this.isshow=false;
    },
    completeclosePage(param){
      if(param){
         this.isshow=false;
        this.complete(param);
      }else{
        this.$Message.warning('请先上传凭证');
      }
         
    },
    notifyPays(param){
        this.submitStatus=param
        this.loadCase()
    },
    complete(param){
      
          this.$http.post('/api2'+this.urls.uploadPayInfo,{caseNo:this.caseNo,paymentRecord:param}).then((result)=>{
                if(result.data.code==200){
                    this.$Message.success('提交成功');
                    this.loadCase();
                    this.caseNo='';
                    this.isshow=false;
                    this.needDeal();
                }else{
                  this.$Message.error('提交失败');
                }
          }) 
      
    },
    pagechange(param){
      this.filterCase(param)
    },
    confirmPay(param){
         this.isshow=true
         this.caseNo=param.row.caseNo
    },
    submitApply(){
      if(this.selectInfos.length>0){
          this.$http.post('/api2'+this.urls.submitCaseInfo,{caseNo:this.selectInfos}).then((result)=>{
                if(result.data.code==200){
                    this.$Message.success('提交成功');
                    this.selectInfos=[];
                    this.filterCase()
                    this.needDeal();
                }else{
                  this.$Message.error('提交失败');
                }
          }) 
      }else{
        this.$Message.warning('请选择数据或已提交');
      }
       
    },
    datepicker(param){
       this.startTime=param[0];
       this.endTime=param[1];
    },
    loadCase(){
       let params={
           pagenum:this.current,
           pagesize:8,
           appName:this.applicantName,
           resName:this.resName,
           startTime:this.startTime,
           endTime:this.endTime,
           submitStatus:this.submitStatus?Number(this.submitStatus):4
        };
        this.list(params)
    },
    filterCase(param=1){
         let params={
           pagenum:param,
           pagesize:8,
           appName:this.applicantName,
           resName:this.resName,
           startTime:this.startTime,
           endTime:this.endTime,
           submitStatus:this.submitStatus?Number(this.submitStatus):4
         };
         this.current=param;
         this.list(params)
    },
    detail(param){
        // this.$http.post('/api2'+this.urls.getCaseDetail,{caseNo:param.row.caseNo}).then((result)=>{
        //     if(result.data.code==200){
                // this.basicInfo=result.data.data;
                this.$router.push({name:'ApplyDetail',params:{basicInfos:param.row.caseNo}});
        //     }else{
        //       this.$Message.error('请求失败');
        //     }
        // })
      
    },
    cancel(param){
      this.$http.post('/api2'+this.urls.revokeCaseInfo,{caseNo:param.row.caseNo}).then((result)=>{
            if(result.data.code==200){
                this.$Message.success('撤销成功');
                this.loadCase();
                this.needDeal();
            }else{
              this.$Message.error('撤销失败');
            }
      }) 
    },
    submit(param){
      this.$router.push({name:'ApplyFirstForm',params:{caseInfos:param.row.caseNo}});
      
    },
    selectChange(param){
          //selectInfos
       if(param.length>0){
            let selectefInfos=[],selectsInfo=[];
            for(let i=0;i<param.length;i++){
              if(param[i].submitPlatformStatus==0){
                selectefInfos.push(param[i].caseNo);
              }
              if(param[i].submitPlatformStatus==2){
                selectsInfo.push({'caseNo':param[i].caseNo});
              }
            }
            this.selectInfos=selectefInfos;
            this.selectsInfo=selectsInfo;
       }
    },
    list(param={pagenum:1,pagesize:8,appName:'',resName:'',startTime:'',endTime:'',submitStatus:4}){
      this.$http.post('/api2'+this.urls.queryPlatformInfo,param).then((result)=>{
            if(result.data.code==200&&result.data.data.data.list.length>0){
              this.loading=false;
              this.data6=result.data.data.data.list;
              this.totalSize=result.data.data.data.total;
            }else{
              this.loading=false;
              this.totalSize=result.data.data.data.total;
              this.data6=[];
            }
      }) 
    }
  },
  components:{Navigation,Confirm},
  mounted(){
      this.list()
      
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .notifypay{
    display: inline-block;
    background: #2e37cb !important;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 12px;
    color: #fff !important;
    font-size: 14px;
    cursor: pointer;
  }
  /* .btn-back{
    background: #e6e6e6 !important;
    color: #000 !important;
    width: 120px;
    height: 44px;
    line-height: 44px;
  } */
  .noSelect{
    background: #fff;
    color:#2e37cb;
    border: 1px solid #2e37cb;
    display: inline-block;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 12px;
    font-size: 14px;
    cursor: pointer;
  }
  .fonttitle{
    font-size: 16px;
  }
  .btn{
    background: #2e37cb;
    color: #fff;
    line-height: 30px;
    width: 120px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
    text-align: center;
    cursor: pointer;
  }
  .mulplebtn-apply{
     background:#1aa864 !important;
  }
  .filterCon{
    margin: 20px;
  }
  .applyTime{
    margin: 0 40px;
  }
</style>
